<template>
  <div class="home">
    <div id="map"></div>
    <!-- <div
      id="scatter"
      style="width: 200px;height:200px;"
    ></div> -->
    <echarts-component ref="ec"></echarts-component>
  </div>
</template>

<script>
import "ol/ol.css";
import gisModel from "../../gisApi";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
// import Overlay from "ol/Overlay";
import XYZ from "ol/source/XYZ";
import { transform } from "ol/proj";
import gisApi from "../../gisApi";
import echartsComponent from "./echartsComponent";
// import EchartsComponent from "./echartsComponent.vue";
// import echarts from "echarts";
export default {
  data() {
    return {
      map: null,
      data: [
        {
          name: "第一社区",
          value: 8,
        },
        {
          name: "第二社区",
          value: 4,
        },
        {
          name: "第三社区",
          value: 9,
        },
        {
          name: "第四社区",
          value: 2,
        },
        {
          name: "第五社区",
          value: 11,
        },
        {
          name: "第六社区",
          value: 7,
        },
      ],
      geoCoordMap: {
        第一社区: [12727733.392080443, 3568706.308521112],
        第二社区: [12729705.467351884, 3568954.728863039],
        第三社区: [12727572.874146093, 3566627.2212934387],
        第四社区: [12729147.477103718, 3566417.019465654],
        第五社区: [12726495.112018114, 3567387.769783193],
        第六社区: [12731562.11067985, 3565503.59691933],
      },
    };
  },
  mounted() {
    this.mapInit();
  },
  components: {
    echartsComponent,
  },
  methods: {
    //数据转化
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        geoCoord = transform(geoCoord, "EPSG:3857", "EPSG:4326");
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },
    //初始化地图
    mapInit() {
      var source = new XYZ({
        url: gisModel.layerConfig.tileUrl,
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: source,
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 15,
        }),
      });
      this.$refs.ec.echartInit(this.map,this.geoCoordMap);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
}
#map {
  height: 100%;
}
</style>
